import { Card, Cell, CellGroup, Divider, Image, Swiper, Tag } from 'react-vant';
import './GoodDetail.css';
import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import GoodsApi from '@/apis/goodsApi';
import { getGoodsImagePath } from '@/utils/common';
const GoodDetail: React.FC = () => {
  const { id } = useParams();
  const [good, setGood] = useState<ResponseGoodsDto>();
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const fetchData = async () => {
      const res = await GoodsApi.getGoodsDetail(parseInt(id as string));
      if (res.status >= 0) {
        setGood(res.data);
      }
    };
    fetchData();
  }, []);

  const handleSwiperChange = (index: number) => {
    setIndex(index);
  };

  return (
    <>
      <div>
        <div className="detailImages">
          {good && (
            <Swiper autoplay={5000} onChange={handleSwiperChange}>
              {good?.detailImages.split(',').map((d: string, i: number) => {
                return (
                  <Swiper.Item key={i}>
                    <Image fit="contain" height={300} src={getGoodsImagePath(good.id, d)} />
                    <div className="detailImages-tags">
                      {index + 1}/{good?.detailImages.split(',').length}
                    </div>
                  </Swiper.Item>
                );
              })}
            </Swiper>
          )}
        </div>

        {/* 商品基本信息 */}
        <Card round>
          <div className="good-header">
            <div className="good-title">
              <h3>{good?.name}</h3>
              {good?.isPromote ? (
                <Tag type="danger" round style={{ marginLeft: 8 }}>
                  促销
                </Tag>
              ) : null}
              {good?.isShelve ? (
                <Tag type="success" round style={{ marginLeft: 8 }}>
                  已上架
                </Tag>
              ) : (
                <Tag type="warning" round style={{ marginLeft: 8 }}>
                  已下架
                </Tag>
              )}
            </div>

            <div className="good-price">
              <span style={{ fontSize: '24px', color: '#ee0a24' }}>
                {
                  <>
                    <span
                      style={
                        good?.promotePrice
                          ? { textDecorationLine: 'line-through', color: 'gray', fontSize: '12px' }
                          : { color: 'red' }
                      }
                    >
                      ¥{good?.price.toFixed(2)}
                    </span>
                    <span style={{ color: 'red' }}>
                      {good?.promotePrice ? '¥' + good?.promotePrice.toFixed(2) : ''}
                    </span>
                  </>
                }
              </span>
            </div>
          </div>

          <Divider dashed />

          <CellGroup>
            <Cell title="规格" value={good?.specs || '暂无'} />
            <Cell title="类别" value={good?.goodTypeName || '暂无'} />
            <Cell title="库存" value={good?.inventory || 0} />
            <Cell title="生产日期" value={good?.birthdayStr || '未知'} />
            <Cell title="保质期" value={good?.expiryday ? `${good.expiryday}天` : '未知'} />
          </CellGroup>
        </Card>

        {/* 商品描述 */}
        <Card round>
          <div className="good-header">
            <h4 style={{ marginBottom: 12 }}>商品描述</h4>
            <div className="good-description">{good?.description || '暂无描述'}</div>
          </div>
        </Card>
      </div>
    </>
  );
};

export default GoodDetail;
